<template>
  <div class="modelType1-box"
       :style="styleMianObject">
    <div class="title-style"
         :style="styleObject">{{ list.contentLists[0].title }}</div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Object,
      default: {
        title: ""
      }
    }
  },
  data () {
    return {
      styleObject: {
        fontSize: '90px',

      },

      styleMianObject: {
        padding: '80px'
      },

      zoom: 1
    }
  },
  mounted () {
    this.$nextTick(() => {
      const offsetWidth = document.getElementsByClassName("modelType1-box")[0].offsetWidth
      this.zoom = offsetWidth / 1898
      this.styleObject.fontSize = 90 * this.zoom + 'px'
      this.styleMianObject.padding = 80 * this.zoom + 'px'
    })
    // localStorage.setItem('width', )
  },

}
</script>
<style lang="less" scoped>
.modelType1-box {
  background: url(../../../assets//img/bg-type/type1.png) no-repeat 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  .title-style {
    position: absolute;
    bottom: 45%;
    color: #004da1;
    width: 50%;
    font-weight: bold;
  }
}
</style>
